<template><div><h2 id="图片-文件上传" tabindex="-1"><a class="header-anchor" href="#图片-文件上传"><span>图片/文件上传</span></a></h2>
<p><a href="https://learnku.com/docs/dcat-admin/2.x/picture-file-upload/model-form.md" target="_blank" rel="noopener noreferrer">数据表单</a>通过以下的调用来生成图片/文件上传表单，支持本地和云存储的文件上传。上传组件是基于<a href="https://fex.baidu.com/webuploader/" target="_blank" rel="noopener noreferrer">webuploader</a>实现的，具体的使用配置可参考<a href="https://fex.baidu.com/webuploader/document.html" target="_blank" rel="noopener noreferrer">webuploader官方文档</a>。</p>
<blockquote>
<p>文件或图片上传表单字段请不要在模型中设置<strong>访问器</strong>和<strong>修改器</strong>拼接域名，如有相关需求可参考<a href="#withhost">文件/图片域名拼接</a>。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file_column'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'image_column'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="本地上传" tabindex="-1"><a class="header-anchor" href="#本地上传"><span>本地上传</span></a></h2>
<p>先添加存储配置，<code v-pre>config/filesystems.php</code> 添加一项<code v-pre>disk</code>:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"></span>
<span class="line"><span class="token string single-quoted-string">'disks'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token operator">...</span> <span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token string single-quoted-string">'admin'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'driver'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'local'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'root'</span> <span class="token operator">=></span> <span class="token function">public_path</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'uploads'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'visibility'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'public'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'url'</span> <span class="token operator">=></span> <span class="token function">env</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'APP_URL'</span><span class="token punctuation">)</span><span class="token operator">.</span><span class="token string single-quoted-string">'/uploads'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>设置上传的路径为<code v-pre>public/uploads</code>(public_path(‘uploads’))。</p>
<p>然后选择上传的<code v-pre>disk</code>，打开<code v-pre>config/admin.php</code>找到：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"></span>
<span class="line"><span class="token string single-quoted-string">'upload'</span>  <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line"></span>
<span class="line">    <span class="token string single-quoted-string">'disk'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'admin'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token string single-quoted-string">'directory'</span>  <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'image'</span>  <span class="token operator">=></span> <span class="token string single-quoted-string">'images'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'file'</span>   <span class="token operator">=></span> <span class="token string single-quoted-string">'files'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>将<code v-pre>disk</code>设置为上面添加的<code v-pre>admin</code>，<code v-pre>directory.image</code>和<code v-pre>directory.file</code>分别为用<code v-pre>$form-&gt;image($column)</code>和<code v-pre>$form-&gt;file($column)</code>上传的图片和文件的上传目录。</p>
<p>当然你也可以在代码中指定<code v-pre>disk</code>：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'your disk name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="云盘上传" tabindex="-1"><a class="header-anchor" href="#云盘上传"><span>云盘上传</span></a></h2>
<p>如果需要上传到云存储，需要安装对应<code v-pre>laravel storage</code>的适配器，拿七牛云存储举例</p>
<p>首先安装 <a href="https://github.com/zgldh/qiniu-laravel-storage" target="_blank" rel="noopener noreferrer">zgldh/qiniu-laravel-storage</a></p>
<p>同样配置好disk，在<code v-pre>config/filesystems.php</code> 添加一项:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token string single-quoted-string">'disks'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token operator">...</span> <span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'qiniu'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'driver'</span>  <span class="token operator">=></span> <span class="token string single-quoted-string">'qiniu'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'domains'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'default'</span>   <span class="token operator">=></span> <span class="token string single-quoted-string">'xxxxx.com1.z0.glb.clouddn.com'</span><span class="token punctuation">,</span> <span class="token comment">//你的七牛域名</span></span>
<span class="line">            <span class="token string single-quoted-string">'https'</span>     <span class="token operator">=></span> <span class="token string single-quoted-string">'dn-yourdomain.qbox.me'</span><span class="token punctuation">,</span>         <span class="token comment">//你的HTTPS域名</span></span>
<span class="line">            <span class="token string single-quoted-string">'custom'</span>    <span class="token operator">=></span> <span class="token string single-quoted-string">'static.abc.com'</span><span class="token punctuation">,</span>                <span class="token comment">//你的自定义域名</span></span>
<span class="line">         <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'access_key'</span><span class="token operator">=></span> <span class="token string single-quoted-string">''</span><span class="token punctuation">,</span>  <span class="token comment">//AccessKey</span></span>
<span class="line">        <span class="token string single-quoted-string">'secret_key'</span><span class="token operator">=></span> <span class="token string single-quoted-string">''</span><span class="token punctuation">,</span>  <span class="token comment">//SecretKey</span></span>
<span class="line">        <span class="token string single-quoted-string">'bucket'</span>    <span class="token operator">=></span> <span class="token string single-quoted-string">''</span><span class="token punctuation">,</span>  <span class="token comment">//Bucket名字</span></span>
<span class="line">        <span class="token string single-quoted-string">'notify_url'</span><span class="token operator">=></span> <span class="token string single-quoted-string">''</span><span class="token punctuation">,</span>  <span class="token comment">//持久化处理回调地址</span></span>
<span class="line">        <span class="token string single-quoted-string">'url'</span>       <span class="token operator">=></span> <span class="token string single-quoted-string">'http://of8kfibjo.bkt.clouddn.com/'</span><span class="token punctuation">,</span>  <span class="token comment">// 填写文件访问根url</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后修改<code v-pre>dcat-admin</code>的上传配置，打开<code v-pre>config/admin.php</code>找到：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"></span>
<span class="line"><span class="token string single-quoted-string">'upload'</span>  <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line"></span>
<span class="line">    <span class="token string single-quoted-string">'disk'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'qiniu'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token string single-quoted-string">'directory'</span>  <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'image'</span>  <span class="token operator">=></span> <span class="token string single-quoted-string">'image'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'file'</span>   <span class="token operator">=></span> <span class="token string single-quoted-string">'file'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>disk</code>选择上面配置的<code v-pre>qiniu</code>，或：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'qiniu'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="公共方法" tabindex="-1"><a class="header-anchor" href="#公共方法"><span>公共方法</span></a></h2>
<h3 id="缩略图-thumbnail" tabindex="-1"><a class="header-anchor" href="#缩略图-thumbnail"><span>缩略图 (thumbnail)</span></a></h3>
<p>上传图片的同时生成缩略图</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">thumbnail</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'small'</span><span class="token punctuation">,</span> <span class="token variable">$width</span> <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token variable">$height</span> <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 生成多张缩略图</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">thumbnail</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'small1'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'small2'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'small3'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>Resizable</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Photo</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">Resizable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// To access thumbnail</span></span>
<span class="line"><span class="token variable">$photo</span><span class="token operator">-></span><span class="token function">thumbnail</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'small'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'photo_column'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="存储驱动-disk" tabindex="-1"><a class="header-anchor" href="#存储驱动-disk"><span>存储驱动 (disk)</span></a></h3>
<p>修改文件上传源</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'your disk name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="上传路径-move" tabindex="-1"><a class="header-anchor" href="#上传路径-move"><span>上传路径 (move)</span></a></h3>
<p>修改上传路径</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">move</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'public/upload/image1/'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="文件名称-name" tabindex="-1"><a class="header-anchor" href="#文件名称-name"><span>文件名称 (name)</span></a></h3>
<p>修改上传文件名称</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'test.text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'picture'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$file</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string single-quoted-string">'test.'</span><span class="token operator">.</span><span class="token variable">$file</span><span class="token operator">-></span><span class="token function">guessExtension</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="随机名称-uniquename" tabindex="-1"><a class="header-anchor" href="#随机名称-uniquename"><span>随机名称 (uniqueName)</span></a></h3>
<p>使用随机生成文件名 (md5(uniqid()).extension)</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'picture'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">uniqueName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="禁止页面删除文件-替换上传" tabindex="-1"><a class="header-anchor" href="#禁止页面删除文件-替换上传"><span>禁止页面删除文件 (替换上传)</span></a></h3>
<p>通过<code v-pre>removable</code>方法可以禁止用户从页面点击删除服务器上的文件，可以实现图片覆盖上传效果。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">removable</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="自动上传-autoupload" tabindex="-1"><a class="header-anchor" href="#自动上传-autoupload"><span>自动上传 (autoUpload)</span></a></h3>
<p>开启这个功能之后选择完文件之后会立即自动上传，页面将不再显示<code v-pre>上传</code>按钮，使用方法如下</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">autoUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'img'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">autoUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="文件上传表单下载功能-downloadable" tabindex="-1"><a class="header-anchor" href="#文件上传表单下载功能-downloadable"><span>文件上传表单下载功能 (downloadable)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">downloadable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="禁止删除-retainable" tabindex="-1"><a class="header-anchor" href="#禁止删除-retainable"><span>禁止删除 (retainable)</span></a></h3>
<p>开启这个功能之后文件将不会从服务器删除</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">retainable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'img'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">retainable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="storagepermission" tabindex="-1"><a class="header-anchor" href="#storagepermission"><span>storagePermission</span></a></h3>
<p>设置上传文件的权限</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'picture'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">storagePermission</span><span class="token punctuation">(</span><span class="token number">777</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="限制上传文件类型" tabindex="-1"><a class="header-anchor" href="#限制上传文件类型"><span>限制上传文件类型</span></a></h3>
<p>限制上传文件的类型</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'jpg,png,gif,jpeg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 可以指定 mimeTypes， 多个用逗号分割</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">accept</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'jpg,png,gif,jpeg'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'image/*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="分块上传-chunked" tabindex="-1"><a class="header-anchor" href="#分块上传-chunked"><span>分块上传 (chunked)</span></a></h3>
<p>启用分块上传</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">chunked</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="分块大小-chunksize" tabindex="-1"><a class="header-anchor" href="#分块大小-chunksize"><span>分块大小(chunkSize)</span></a></h3>
<p>设置分块大小，单位为<code v-pre>KB</code>，默认<code v-pre>5MB</code></p>
<blockquote>
<p>{tip} 调用这个方法会自动启用分块上传</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 设置为 1MB</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">chunkSize</span><span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="文件大小-maxsize" tabindex="-1"><a class="header-anchor" href="#文件大小-maxsize"><span>文件大小(maxSize)</span></a></h3>
<p>设置单个文件最大大小，单位为<code v-pre>Kb</code>，默认大小为<code v-pre>10M</code>。</p>
<blockquote>
<p>{tip} 同时应该保证<code v-pre>php.ini</code>配置文件的<code v-pre>upload_max_filesize</code>参数值必须大于这个方法设置的值。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 设置单个文件最大为1Mb</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">maxSize</span><span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="并发上传线程数-threads" tabindex="-1"><a class="header-anchor" href="#并发上传线程数-threads"><span>并发上传线程数 (threads)</span></a></h3>
<p>设置并发上传线程数，默认<code v-pre>3</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">threads</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="自定义上传接口-url" tabindex="-1"><a class="header-anchor" href="#自定义上传接口-url"><span>自定义上传接口 (url)</span></a></h3>
<p>通过<code v-pre>url</code>可以设置自定义上传接口</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'users/files'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>系统提供了<code v-pre>Dcat\Admin\Traits\HasUploadedFile</code>这个<code v-pre>trait</code>来帮助开发者更轻松地处理上传文件，用法如下</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Controllers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>HasUploadedFile</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">FileController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">HasUploadedFile</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$disk</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'local'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 判断是否是删除文件请求</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">isDeleteRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 删除文件并响应</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">deleteFileAndResponse</span><span class="token punctuation">(</span><span class="token variable">$disk</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 获取上传的文件</span></span>
<span class="line">        <span class="token variable">$file</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 获取上传的字段名称</span></span>
<span class="line">        <span class="token variable">$column</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">uploader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token property">upload_column</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$dir</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'my-images'</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$newName</span> <span class="token operator">=</span> <span class="token variable">$column</span><span class="token operator">.</span><span class="token string single-quoted-string">'-我的文件名称.'</span><span class="token operator">.</span><span class="token variable">$file</span><span class="token operator">-></span><span class="token function">getClientOriginalExtension</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$result</span> <span class="token operator">=</span> <span class="token variable">$disk</span><span class="token operator">-></span><span class="token function">putFileAs</span><span class="token punctuation">(</span><span class="token variable">$dir</span><span class="token punctuation">,</span> <span class="token variable">$file</span><span class="token punctuation">,</span> <span class="token variable">$newName</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$path</span> <span class="token operator">=</span> <span class="token string double-quoted-string">"<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$dir</span><span class="token punctuation">}</span></span>/<span class="token interpolation"><span class="token variable">$newName</span></span>"</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$result</span></span>
<span class="line">            <span class="token operator">?</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">responseUploaded</span><span class="token punctuation">(</span><span class="token variable">$path</span><span class="token punctuation">,</span> <span class="token variable">$disk</span><span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token variable">$path</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token punctuation">:</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">responseErrorMessage</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'文件上传失败'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在你的路由文件<code v-pre>app\Admin\routes.php</code>中加上</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$router</span><span class="token operator">-></span><span class="token function">any</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'users/files'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'FileController@handle'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="deleteurl" tabindex="-1"><a class="header-anchor" href="#deleteurl"><span>deleteUrl</span></a></h3>
<p>修改删除已上传文件路径，此方法一般不需要修改</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">deleteUrl</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file/delete'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="自动保存字段值-autosave" tabindex="-1"><a class="header-anchor" href="#自动保存字段值-autosave"><span>自动保存字段值 (autoSave)</span></a></h3>
<p>设置上传文件后是否自动保存文件路径到数据库，此方法默认启用，一般不需要修改</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">autoSave</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="配置-options" tabindex="-1"><a class="header-anchor" href="#配置-options"><span>配置 (options)</span></a></h3>
<p>自定义<a href="https://fex.baidu.com/webuploader/document.html" target="_blank" rel="noopener noreferrer">webuploader</a>配置</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'disableGlobalDnd'</span> <span class="token operator">=></span> <span class="token constant boolean">true</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="可排序-sortable" tabindex="-1"><a class="header-anchor" href="#可排序-sortable"><span>可排序 (sortable)</span></a></h3>
<p>此方法仅针对多图/文件上传表单有效</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleImage</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'images'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="压缩图片-compress" tabindex="-1"><a class="header-anchor" href="#压缩图片-compress"><span>压缩图片 (compress)</span></a></h3>
<p>默认不启用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 启用图片压缩功能</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleImage</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'images'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">compress</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avatar'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">compress</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'width'</span> <span class="token operator">=></span> <span class="token number">1600</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'height'</span> <span class="token operator">=></span> <span class="token number">1600</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 图片质量，只有type为`image/jpeg`的时候才有效。</span></span>
<span class="line">    <span class="token string single-quoted-string">'quality'</span> <span class="token operator">=></span> <span class="token number">90</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.</span></span>
<span class="line">    <span class="token string single-quoted-string">'allowMagnify'</span> <span class="token operator">=></span> <span class="token constant boolean">false</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 是否允许裁剪。</span></span>
<span class="line">    <span class="token string single-quoted-string">'crop'</span> <span class="token operator">=></span> <span class="token constant boolean">false</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 是否保留头部meta信息。</span></span>
<span class="line">    <span class="token string single-quoted-string">'preserveHeaders'</span> <span class="token operator">=></span> <span class="token constant boolean">true</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 如果发现压缩后文件大小比原来还大，则使用原来图片</span></span>
<span class="line">    <span class="token comment">// 此属性可能会影响图片自动纠正功能</span></span>
<span class="line">    <span class="token string single-quoted-string">'noCompressIfLarger'</span> <span class="token operator">=></span> <span class="token constant boolean">false</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 单位字节，如果图片大小小于此值，不会采用压缩。</span></span>
<span class="line">    <span class="token string single-quoted-string">'compressSize'</span> <span class="token operator">=></span> <span class="token number">0</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="监听webuploader文件上传事件-on" tabindex="-1"><a class="header-anchor" href="#监听webuploader文件上传事件-on"><span>监听WebUploader文件上传事件 (on)</span></a></h3>
<p>通过 <code v-pre>on</code> 方法可以监听 <a href="http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_events" target="_blank" rel="noopener noreferrer">WebUploader文件上传相关事件</a></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'startUpload'</span><span class="token punctuation">,</span> <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">        <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'文件开始上传...'</span><span class="token punctuation">,</span> this<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 上传文件前附加自定义参数到文件上传接口</span></span>
<span class="line">            this<span class="token operator">.</span>uploader<span class="token operator">.</span>options<span class="token operator">.</span>formData<span class="token punctuation">[</span><span class="token string single-quoted-string">'custom_field'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'...'</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line">    <span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'uploadFinished'</span><span class="token punctuation">,</span> <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">        <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'文件上传完毕'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="文件-图片域名拼接" tabindex="-1"><a class="header-anchor" href="#文件-图片域名拼接"><span>文件/图片域名拼接</span></a></h3>
<p>文件或图片上传表单字段请不要在模型中设置<strong>访问器</strong>和<strong>修改器</strong>拼接域名，如果你需要在访问的时候拼接完整域名，可以在模型中定义一个<code v-pre>public</code>方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Str</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Storage</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">YourModel</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 定义一个public方法访问图片或文件</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">getImage</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token class-name static-context">Str</span><span class="token operator">::</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">image</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'//'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">image</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Storage</span><span class="token operator">::</span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">image</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="保存域名" tabindex="-1"><a class="header-anchor" href="#保存域名"><span>保存域名</span></a></h3>
<p>如果你需要保存文件域名到数据表，可以使用<code v-pre>saveFullUrl</code>方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avatar'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">saveFullUrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">saveFullUrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="监听文件上传变动-change" tabindex="-1"><a class="header-anchor" href="#监听文件上传变动-change"><span>监听文件上传变动 (change)</span></a></h3>
<p>通过以下方法可以监听文件<strong>上传成功</strong>或文件<strong>被删除</strong>时产生的变动</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$file</span> <span class="token operator">=</span> <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token class-name type-declaration">JS</span></span>
<span class="line">$<span class="token punctuation">(</span><span class="token string single-quoted-string">'{$file->getElementClassSelector()} .file-input'</span><span class="token punctuation">)</span><span class="token operator">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'文件发生变动'</span><span class="token punctuation">,</span> this<span class="token operator">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="覆盖上传-override" tabindex="-1"><a class="header-anchor" href="#覆盖上传-override"><span>覆盖上传 (override)</span></a></h3>
<p>通过 <code v-pre>override</code> 方法可以实现文件覆盖上传。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'file'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">override</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'img'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">override</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="图片上传内置方法" tabindex="-1"><a class="header-anchor" href="#图片上传内置方法"><span>图片上传内置方法</span></a></h2>
<h3 id="压缩、裁切、添加水印等" tabindex="-1"><a class="header-anchor" href="#压缩、裁切、添加水印等"><span>压缩、裁切、添加水印等</span></a></h3>
<p>可以使用压缩、裁切、添加水印等各种方法,需要先安装<a href="https://image.intervention.io/v2" target="_blank" rel="noopener noreferrer">intervention/image</a>.</p>
<p>更多使用方法请参考[<a href="https://image.intervention.io/v2" target="_blank" rel="noopener noreferrer">Intervention</a>]：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 修改图片上传路径和文件名</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">move</span><span class="token punctuation">(</span><span class="token variable">$dir</span><span class="token punctuation">,</span> <span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 剪裁图片</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">crop</span><span class="token punctuation">(</span><span class="token keyword type-hint">int</span> <span class="token variable">$width</span><span class="token punctuation">,</span> <span class="token keyword type-hint">int</span> <span class="token variable">$height</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token keyword type-declaration">int</span> <span class="token variable">$x</span><span class="token punctuation">,</span> <span class="token keyword type-hint">int</span> <span class="token variable">$y</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 加水印</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">insert</span><span class="token punctuation">(</span><span class="token variable">$watermark</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'center'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="限制上传图片的尺寸" tabindex="-1"><a class="header-anchor" href="#限制上传图片的尺寸"><span>限制上传图片的尺寸</span></a></h3>
<p>设置文件上传尺寸限制</p>
<p>参数： <code v-pre>array</code> 单位为像素</p>
<ul>
<li><code v-pre>width</code> 指定宽度</li>
<li><code v-pre>height</code> 指定高度</li>
<li><code v-pre>min_width</code> 最小宽度</li>
<li><code v-pre>min_height</code> 最小高度</li>
<li><code v-pre>max_width</code> 最大宽度</li>
<li><code v-pre>max_height</code> 最大高度</li>
<li><code v-pre>ratio</code> 宽高比 (width/height)</li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 上传宽度为100-300像素之间的图片</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'img'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">dimensions</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'min_width'</span> <span class="token operator">=></span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'max_width'</span> <span class="token operator">=></span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="把图片-文件路径保存在其他数据表" tabindex="-1"><a class="header-anchor" href="#把图片-文件路径保存在其他数据表"><span>把图片/文件路径保存在其他数据表</span></a></h2>
<p>通过下面的方法可以把图片或文件的路径保存在单独的附件表，而当前的图片/文件字段只保存ID</p>
<blockquote>
<p>{tip} 这里的示例用的是单图上传表单，如果是多图的话可以按这个思路自行调整。</p>
</blockquote>
<p>图片/文件表结构</p>
<div class="language-sql line-numbers-mode" data-highlighter="prismjs" data-ext="sql" data-title="sql"><pre v-pre class="language-sql"><code><span class="line"><span class="token keyword">CREATE</span> <span class="token keyword">TABLE</span> <span class="token identifier"><span class="token punctuation">`</span>images<span class="token punctuation">`</span></span> <span class="token punctuation">(</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token keyword">unsigned</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">AUTO_INCREMENT</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>path<span class="token punctuation">`</span></span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">191</span><span class="token punctuation">)</span> <span class="token keyword">COLLATE</span> utf8mb4_unicode_ci <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>created_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>updated_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token keyword">PRIMARY</span> <span class="token keyword">KEY</span> <span class="token punctuation">(</span><span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">)</span> <span class="token keyword">ENGINE</span><span class="token operator">=</span>MyISAM <span class="token keyword">AUTO_INCREMENT</span><span class="token operator">=</span><span class="token number">4</span> <span class="token keyword">DEFAULT</span> <span class="token keyword">CHARSET</span><span class="token operator">=</span>utf8mb4 <span class="token keyword">COLLATE</span><span class="token operator">=</span>utf8mb4_unicode_ci<span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'image1'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">isEditing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span> <span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 编辑页面，删除图片逻辑</span></span>
<span class="line">            <span class="token class-name static-context">Image</span><span class="token operator">::</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token property">image1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token keyword">return</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 新增或编辑页面上传图片</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$model</span> <span class="token operator">=</span> <span class="token class-name static-context">Image</span><span class="token operator">::</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'path'</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">first</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">empty</span><span class="token punctuation">(</span><span class="token variable">$model</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$model</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$model</span><span class="token operator">-></span><span class="token property">path</span> <span class="token operator">=</span> <span class="token variable">$value</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$model</span><span class="token operator">-></span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$model</span><span class="token operator">-></span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span> <span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Image</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token keyword type-casting">array</span><span class="token punctuation">)</span> <span class="token variable">$v</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'path'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="文件上传失败或无法访问" tabindex="-1"><a class="header-anchor" href="#文件上传失败或无法访问"><span>文件上传失败或无法访问？</span></a></h2>
<p>如果你发现无法上传文件，那么通常有几下几点原因：</p>
<ol>
<li><code v-pre>Laravel</code>文件上传配置不正确，请检查<code v-pre>admin.upload.disk</code>参数。如果你不了解<code v-pre>laravel</code>文件上传功能，请阅读文档<a href="https://learnku.com/docs/laravel/7.x/filesystem/7485" target="_blank" rel="noopener noreferrer">Laravel - 文件存储</a></li>
<li>文件过大，需要调整<code v-pre>php.ini</code>的<code v-pre>upload_max_filesize</code>参数</li>
<li>文件上传目录没有写权限</li>
<li><code v-pre>php</code>没有安装或没有开启<code v-pre>fileinfo</code>扩展</li>
</ol>
<p>如果你的文件上传成功了，却无法正常访问，那么可能是<code v-pre>.env</code>配置文件中的<code v-pre>APP_URL</code>参数没有设置正确。</p>
</div></template>


